<template>
    <div class="box_alarm">
        <MoodalTitle :title="'市政问题高发类型分析'" >
            <TimeTab  :timeList="timeList" @timeReturnFn="timeReturnFn"/>
        </MoodalTitle>
        <!-- 统计图 -->
        <div id="char" class="box_chart"></div>
    </div>
</template>
<script>
import MoodalTitle from '@/components/ModalTitle/Index.vue'
import TimeTab from '@/components/TimeTab/Index.vue'
import {ZhiShiJianGuan} from '@/api/zhangzi/index'

export default {
    components: { MoodalTitle ,TimeTab},
    data() {
        return {
            timeList: [
                {
                    title: '周',
                    value: 1,
                },
                {
                    title: '月',
                    value: 2,
                },
                {
                    title: '年',
                    value: 3,
                },
            ],
            dateType:1
        }
    },
    mounted(){this.IncidenceData()},
    methods: {
        functionEchart(type,orderNumber) {
            // 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.querySelector('#char'));

            let option = {
                grid: {
                    // left: '5%',
                    // right: '2%',
                    top: '20%',
                    bottom: '10%',
                },
                title: {
                    // text: '数量',
                    // color: '#ffffff',
                },
                xAxis: {
                    axisLabel: {
                        color: '#fff', // 坐标轴label文字颜色
                    },
                    nameTextStyle: {
                        color: '#64A7DF'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#64A7DF'
                        }
                    },
                    data: type
                },
                yAxis: {
                    name: '数量',
                    axisLabel: {
                        color: '#fff', // 坐标轴label文字颜色
                    },
                    nameTextStyle: {
                        color: '#64A7DF'
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#64A7DF'
                        }
                    },

                    splitLine: { // ‘三’形分隔线
                        show: true,
                        lineStyle: {
                            color: '#22376d'
                        },
                    }

                },

                series: [{
                    type: 'bar',
                    data:orderNumber,
                    // showBackground: true,
                    itemStyle: {
                        color:'#FFC36D' //改变柱子的颜色
                    },
                    barWidth: 32,
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        },
        // 市政问题高发类型分析
        IncidenceData(){
           let page = {
            dateType: this.dateType
           }
           let  type = []; //类型名称
           let orderNumber = []; //数量
            ZhiShiJianGuan.getHighType(page).then(res => {
                console.log(res,'市政问题高发类型分析');
                if(res.code == 200){
                    res.data.forEach(item =>{
                        type.push(item.type)
                        orderNumber.push(item.orderNumber)
                    })
                    console.log(type,'type');
                    this.functionEchart(type,orderNumber)
                }
            })
        },
        timeReturnFn(val){
            this.dateType = val.value
            this.IncidenceData()
            console.log(val,'val');
        }
    }
}
</script>

<style lang="less" scoped>
.box_alarm {
    width: 50rem;
    height: 33.4rem!important;
    margin-bottom: 1.9rem;
}
.box_chart {
    width: 46rem;
    height: 26rem;
}
</style>